<template>
  <div>
      <van-nav-bar class="app-nav-bar" title="事件上报"/>

      <van-form @submit="onSubmit">
        <van-field
            v-model="form.reportingLocation"
            name="位置"
            label="位置"
            placeholder="位置"
            :rules="[{ required: true, message: '请填写位置' }]"
        />
        <van-field
            v-model="form.eventDesc"
            name="描述"
            label="描述"
            placeholder="描述"
            :rules="[{ required: true, message: '请填写描述' }]"
        />
        <van-field
            placeholder="请填写质量内容"
            v-model="qualityContent"
            @click="showqualityContentListShare=true"
            right-icon="arrow"
            label="质量内容"
        />
        <!-- 联级选择 -->
        <van-action-sheet v-model="showqualityContentListShare" title="请选择" :actions="qualityContentList" @select="onSelect1"/>
        <van-field
            placeholder="请填写部件内容"
            v-model="partsContent"
            @click="showpartsListShare=true"
            right-icon="arrow"
            label="部件"
        />
        <van-action-sheet v-model="showpartsListShare" title="请选择" :actions="partsList" @select="onSelect2"/>
        <van-field label="上传照片" readonly placeholder="请选择图片"  @click="chooseFile" right-icon="arrow" />
        <van-uploader :max-cont="1" v-model="fileList" :after-read="afterRead" ref="file"/>

        <div style="margin:16px">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
     </van-form>
  </div>
</template>

<script>
export default {
    data(){
        return{
            // value:"",
            fileList:[],
            file:{},
            partsList:[],
            qualityContentList:[],
            showqualityContentListShare:false,
            showpartsListShare:false,
            form:{
                qualityId:null,
                qualityOptitons:[],
                reportingLocation:'',
                userOptions:[],
                partsId:null,
                partsOptitons:[],
                eventDesc:''
            },
            qualityContent:"",
            partsContent:""
        }
    },
    methods:{
        onSubmit(){
            //通过FormData构造函数创建一个空对象
            var form = new FormData();
            form.append("file",this.file);
            let reportpersonId = sessionStorage.getItem("set_token").split("-")[2];//获取token值二个-
            //可以通过append()方法来追加数据
            form.append("qualityId",this.form.qualityId);
            form.append("reportingLocation",this.form.reportingLocation);
            form.append("partsId",this.form.partsId);
            form.append("eventDesc",this.form.eventDesc);
            form.append("reportpersonId",reportpersonId);
            this.request({
                method:"post",
                url:this.$location.addEvent,
                Headers:{
                    "Content-Type":"multipart/form-data"
                },
                data:form,
            }).then((res) =>{
                console.log(res);
                if(res.data.status == "200"){
                    this.$toast.success("事件上报成功!");
                    this.$router.push("/event");
                }else{
                    this.$toast.fail("事件上报失败!");
                    this.$router.push("/event")
                }
            });
        },
        chooseFile(){
            this.$refs.file.chooseFile();//触发选择图片事件
        },
        onSelect1(item){
            console.log(item.id);
            this.qualityContent=item.name;
            this.form.qualityId=item.id.toString();//获取
            this.showqualityContentListShare = false;//关闭联级选择
        },
        onSelect2(item){
            this.partsContent=item.name;
            this.form.partsId=item.id;//部件
            this.showpartsListShare = false;
        },
        async getQualityListAll(){
            const {data:res} =await this.request({
                url:this.$location.getQualityListAll
                });
            console.log(res)
            res.data.forEach(item=>{
                this.qualityContentList.push({
                    id:item.id.toString(),
                    name:item.qualityContent
                })
            })
        },
        async getPartsListAll(){
            const {data:res} =await this.request({
                url:this.$location.getPartsListAll
                });
            console.log(res)
            res.data.forEach(item=>{
                this.partsList.push({
                    id:item.id.toString(),
                    name:item.partsName
                })
            })
        },
         afterRead(fileData) {
            // 此时可以自行将文件上传至服务器
            console.log(fileData);
            this.file=fileData.file;

         },
    },
    created(){
        this.getQualityListAll();
        this.getPartsListAll();
    }
}
</script>

<style lang="less" scoped>
// /deep可以修改子组件样式，必须结合scoped一起使用采用
// /deep/ .app-nav-bar{
//     background-color: #3296fa;
//     .van-nav-bar__title {
//         color: #fff !important;
//     }
//     .van-icon{
//         color: #fff;
//     }
// }

</style>